// 家庭媒体管理系统 - 玻璃态设计样式
// 现代化Glassmorphism设计实现

// 导入变量
@use 'variables' as *;

// ================================
// 玻璃态基础混合器
// ================================

// 玻璃态效果混合器
@mixin glassmorphism($opacity: 0.25, $blur: 16px, $border-opacity: 0.18, $saturation: 180%) {
  background: rgba(255, 255, 255, $opacity);
  backdrop-filter: blur($blur) saturate($saturation);
  -webkit-backdrop-filter: blur($blur) saturate($saturation);
  border: 1px solid rgba(255, 255, 255, $border-opacity);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%);
  }
}

// 玻璃态变体
@mixin glass-card {
  @include glassmorphism(0.15, 20px, 0.1, 180%);
  border-radius: $radius-2xl;
  padding: $spacing-6;
}

@mixin glass-navbar {
  @include glassmorphism(0.8, 20px, 0.2, 180%);
  backdrop-filter: blur(20px) saturate(180%);
}

@mixin glass-modal {
  @include glassmorphism(0.95, 40px, 0.18, 200%);
  border-radius: $radius-3xl;
}

// ================================
// 高级玻璃态组件样式
// ================================

// 现代化卡片
.glass-card {
  @include glass-card;
  transition: all $duration-normal $ease-out-quart;
  
  &:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
      $shadow-glass,
      0 20px 40px rgba(0, 0, 0, 0.1),
      $glow-primary;
  }
  
  &.card-elevated {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(40px) saturate(200%);
  }
}

// 浮动操作按钮
.glass-fab {
  @include glassmorphism(0.2, 20px, 0.2);
  border-radius: $radius-full;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: $spacing-6;
  right: $spacing-6;
  cursor: pointer;
  transition: all $duration-normal ease;
  
  &:hover {
    transform: scale(1.1);
    box-shadow: $shadow-xl, $glow-primary;
  }
  
  &:active {
    transform: scale(0.95);
  }
}

// 导航栏
.glass-navigation {
  @include glass-navbar;
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 $spacing-8;
  position: sticky;
  top: 0;
  z-index: $z-index-sticky;
  
  .nav-brand {
    font-weight: $font-weight-bold;
    font-size: $font-size-xl;
    background: $gradient-primary;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

// 玻璃态侧边栏
.glass-sidebar {
  @include glassmorphism(0.1, 24px, 0.15, 200%);
  border-radius: 0 $radius-2xl $radius-2xl 0;
  backdrop-filter: blur(24px) saturate(200%);
  
  .sidebar-item {
    padding: $spacing-3 $spacing-4;
    margin: $spacing-1 $spacing-3;
    border-radius: $radius-lg;
    transition: all $duration-fast ease;
    
    &:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: translateX(4px);
    }
    
    &.active {
      background: rgba($primary-500, 0.2);
      box-shadow: 0 4px 12px rgba($primary-500, 0.3);
    }
  }
}

// 玻璃态模态框
.glass-modal {
  @include glass-modal;
  
  .modal-backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    position: fixed;
    inset: 0;
    z-index: $z-index-modal-backdrop;
  }
  
  .modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: $z-index-modal;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
  }
}

// 玻璃态下拉菜单
.glass-dropdown {
  @include glassmorphism(0.9, 16px, 0.2, 180%);
  border-radius: $radius-lg;
  padding: $spacing-2;
  box-shadow: $shadow-lg;
  z-index: $z-index-dropdown;
  
  .dropdown-item {
    padding: $spacing-2 $spacing-3;
    border-radius: $radius-md;
    transition: all $duration-fast ease;
    
    &:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateX(2px);
    }
  }
}

// 玻璃态工具提示
.glass-tooltip {
  @include glassmorphism(0.9, 12px, 0.25, 150%);
  border-radius: $radius-md;
  padding: $spacing-2 $spacing-3;
  font-size: $font-size-sm;
  color: $gray-800;
  z-index: $z-index-tooltip;
  
  &::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
  }
  
  &.tooltip-top::after {
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: rgba(255, 255, 255, 0.9);
  }
  
  &.tooltip-bottom::after {
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: rgba(255, 255, 255, 0.9);
  }
}

// ================================
// 暗色模式玻璃态样式
// ================================

[data-theme="dark"] {
  .glass-card {
    @include glassmorphism(0.08, 20px, 0.08, 150%);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
  }
  
  .glass-navigation {
    background: rgba(15, 15, 35, 0.8);
    border-color: $dark-glass-border;
  }
  
  .glass-sidebar {
    background: rgba(15, 15, 35, 0.6);
    border-color: $dark-glass-border;
    
    .sidebar-item {
      &:hover {
        background: rgba(255, 255, 255, 0.05);
      }
      
      &.active {
        background: rgba($primary-400, 0.15);
      }
    }
  }
  
  .glass-dropdown {
    background: rgba(37, 45, 63, 0.9);
    border-color: $dark-glass-border;
    
    .dropdown-item:hover {
      background: rgba(255, 255, 255, 0.08);
    }
  }
  
  .glass-tooltip {
    background: rgba(37, 45, 63, 0.95);
    color: $gray-200;
  }
}

// ================================
// 响应式玻璃态样式
// ================================

@media (max-width: $breakpoint-md) {
  .glass-card {
    padding: $spacing-4;
    margin: $spacing-3;
  }
  
  .glass-navigation {
    height: 64px;
    padding: 0 $spacing-4;
  }
  
  .glass-sidebar {
    border-radius: 0;
    
    .sidebar-item {
      padding: $spacing-4;
      margin: $spacing-1 0;
    }
  }
  
  .glass-modal .modal-content {
    margin: $spacing-4;
    max-width: calc(100vw - #{$spacing-8});
    max-height: calc(100vh - #{$spacing-8});
  }
}

// ================================
// 高性能优化
// ================================

// GPU加速
.glass-accelerated {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

// 减少重绘的玻璃态元素
.glass-optimized {
  contain: layout style paint;
  
  &:hover,
  &:focus {
    contain: none;
  }
}

// ================================
// 动画增强
// ================================

// 玻璃态出现动画
@keyframes glassAppear {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    backdrop-filter: blur(20px);
  }
}

.glass-appear {
  animation: glassAppear $duration-slow $ease-out-back;
}

// 玻璃态涟漪效果
@keyframes glassRipple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.glass-ripple {
  position: relative;
  overflow: hidden;
  
  &::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    transform: scale(0);
    animation: glassRipple 0.6s ease-out;
  }
}